{% extends "admin/common/base.html" %}

{% block title %}新建blog{% endblock %}

{% block top_css %}
<link rel="stylesheet" href="/admin/edit-md/css/editormd.css"/>
<style>
        .center {
            display: block;
            width: 100%;
        }

        .center button {
            float: right;
            margin-left: 10px;
        }
       .my-autocomplete {
         li {
           line-height: normal;
           padding: 7px;

           .name {
             text-overflow: ellipsis;
             overflow: hidden;
           }
           .addr {
             font-size: 12px;
             color: #b4b4b4;
           }

           .highlighted .addr {
             color: #ddd;
           }
         }
       }

.el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }







</style>
{% endblock %}

{% block content %}
<div class="row">
    <!-- Basic example -->
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-body">
                <form role="form">
                    <div class="form-group">
                        <label for="exampleInputEmail1">标题</label>
                        <input type="text" v-model="article.title" class="form-control" placeholder="标题">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">封面</label>
                        <input v-model="article.pic_url" type="text" class="form-control" placeholder="封面">
                    </div>
                </form>
            </div><!-- panel-body -->
        </div> <!-- panel -->
    </div> <!-- col-->
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-body">
                <div role="form">
                    <div class="form-group">
                        <label for="exampleInputEmail1">文章组</label>
                        <el-autocomplete
                                v-model="state"
                                :fetch-suggestions="querySearchAsync"
                                placeholder="请输入内容"
                                @select="handleSelect"
                        ></el-autocomplete>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">文章权限</label>
                        <el-switch
                                v-model="article.is_comment"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                        </el-switch>
                    </div>
                    <el-tag
                            :key="tag"
                            v-for="tag in article.labels"
                            closable
                            :disable-transitions="false"
                            @close="handleClose(tag)">
                        {{ "{{ tag }}" }}
                    </el-tag>
                    <el-input
                            class="input-new-tag"
                            v-if="inputVisible"
                            v-model="inputValue"
                            ref="saveTagInput"
                            size="small"
                            @keyup.enter.native="handleInputConfirm"
                            @blur="handleInputConfirm">
                    </el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
                </div>
            </div><!-- panel-body -->
        </div> <!-- panel -->
    </div> <!-- col-->

    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-body">
                <form role="form">
                    <div class="form-group">
                        <label for="exampleInputEmail1">文章摘要</label>
                        <input type="text" v-model="article.summary" class="form-control" placeholder="文章摘要">
                    </div>
                </form>
            </div><!-- panel-body -->
        </div> <!-- panel -->
    </div> <!-- col-->
</div>
<div id="md-editor">
    <textarea style="display:none;"></textarea>
</div>
<div class="center">
    <button @click="saveArticle" id="submitBlog" type="button"
            class="btn btn-purple btn-info waves-effect waves-light w-md m-b-5">
        提交
    </button>
    <button @click="saveToDraft" id="draftBlog" type="button"
            class="btn btn-purple btn-info waves-effect waves-light w-md m-b-5">
        草稿
    </button>
</div>

{% endblock %}

{% block bottom_js %}
<script src="/common/js/jquery.min.js"></script>
<script src="/admin/edit-md/editormd.min.js"></script>
{% endblock %}

{% block bottom_script %}
<script>
        let app = new Vue({
            el: '#wrapper',
            data: {
                mdEditor: {},
                article: {
                    document_type: 'markdown',
                    summary: '',
                    title: '',
                    pic_url: '',
                    is_comment: true,
                    is_draft: false,
                    group_id: '',
                    labels:  [],
                    resources: [],
                    content: "",
                },
                inputVisible: false,
                inputValue: '',
                restaurants: [],
                state: '',
                timeout:null
            },
            methods: {
             loadAll() {
        return [
          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
          { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
        ];
      },
     querySearchAsync(queryString, cb) {
            var restaurants = this.restaurants;
            var results = restaurants;

            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
              cb(results);
            }, 3000 * Math.random());
      },
      createStateFilter(queryString) {
           return (state) => {
             return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
           };
      },
      handleSelect(item) {
        console.log(item);
      },
            handleClose(tag) {
        this.article.labels.splice(this.article.labels.indexOf(tag), 1);
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.article.labels.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },
                saveToDraft() {
                    this.article.is_draft = true;
                    this.article["content"] = this.mdEditor.getMarkdown();
                    request({
                        url: baseUrl + "/api/article",
                        method: 'post',
                        data: this.article,
                    }).then((response) => {
                        if(response['data'] == 'success'){
                            window.location.href = "/admin/article_manage/1";
                       }else{
                       alert("发布失败");
                       }
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                saveArticle() {
                    this.article["content"] = this.mdEditor.getMarkdown();
                    console.log(this.article);
                    request({
                        url: baseUrl + "/api/article",
                        method: 'post',
                        data: this.article,
                    }).then((response) => {
                       if(response['data'] == 'success'){
                            window.location.href = "/admin/article_manage/1";
                       }else{
                       alert("发布失败");
                       }
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                createEditor() {
                    this.mdEditor = editormd("md-editor", {
                        width: "100%",
                        height: 500,
                        syncScrolling: "single",
                        imageUpload: true,
                        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                        imageUploadURL: "/api/upload",
                        path: "/admin/edit-md/lib/",
                        onload: ()=> {
                        // 引入插件 执行监听方法
                        editormd.loadPlugin("/admin/edit-md/plugins/image-handle-paste/image-handle-paste", ()=>{
                        this.mdEditor.imagePaste();
                              });
                        editormd.loadPlugin("/admin/edit-md/plugins/code-auto-save/code-auto-save", ()=> {
                        // 初始化插件 实现监听
                        this.mdEditor.CodeAutoSave();
                            });
                        },




                 // 工具栏添加一个自定义方法
                toolbarIcons: function() {
                    // 给工具栏full模式添加一个自定义方法
                    return editormd.toolbarModes.full.concat(["customIcon"]);
                },
                // 自定义方法的图标 指定一个FontAawsome的图标类
                toolbarIconsClass: {
                    customIcon: "fa-paste"
                },
                // 没有图标可以插入内容，字符串或HTML标签
                toolbarIconTexts: {
                    customIcon: "从草稿箱加载"
                },
                // 图标的title
                lang: {
                    toolbar: {
                        customIcon: "从草稿箱加载"
                    }
                },
                // 自定义工具栏按钮的事件处理
                toolbarHandlers: {
                    customIcon: ()=>{
                        // 读取缓存内容
                        this.mdEditor.CodeAutoSaveGetCache();
                    }
                }
                    });
                },
            },
            mounted: function () {
                this.createEditor();
            }
        })

</script>

{% endblock %}